<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            height: 100vh;
        }

        input {
            padding: 3px;
            width: 200px;
        }

        td {
            padding-bottom: 5px;
        }

        .simplecenter {

            display: flex;
            justify-content: center;
            align-items: center;

        }
        fieldset{
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>


</head>

<body class="simplecenter">

    <main >

        <fieldset name="hello">

            <legend>用户登录</legend>
                
        <form id="loginForm">



            <table>

                <tr>
                    <td> <label for="username">username:</label> </td>
                </tr>

                <tr>

                    <td><input type="text" name="name" id="username" autocomplete="off"></td>
                </tr>
                <tr>
                    <td> <label for="password">password:</label> </td>

                </tr>
                <tr>
                    <td><input type="password" name="name" id="password" autocomplete="off"></td>
                </tr>

                <tr>

                    <td>
                        <input type="submit" value="Login">
                    </td>
                </tr>


            </table>


        </form>

        </fieldset>
    

    </main>




    <script>

        document.getElementById("loginForm").addEventListener("submit", function (e) {


            e.preventDefault();
            data = {
                username: document.getElementById("username").value,
                password: document.getElementById("password").value
            }
            fetch("http://127.0.0.1:5000/login", {

                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(data)

            }).then
                (response => response.json()).then
                (data => {

                    if (data["code"] == "1")
                        window.location.replace("/")
                    else
                        alert("username or password is incorrect")


                })


        })


    </script>

</body>

</html>